<script setup lang="ts">
const emits = defineEmits(['header', 'bread'])
emits('header', false)
emits('bread', false)
import { Iphone, Lock } from '@element-plus/icons-vue'
import useLogin from '@/hooks/useLogin'
const { login, form } = useLogin()
</script>
<template>
  <div>
    <div class="login-container">
      <img src="@/assets/Imgs/login_left.png" alt="" srcset="" />
      <div class="login_right">
        <div class="title">
          欢迎来到商城<br />
          登录享采购专属优惠
        </div>
        <el-input
          v-model="form.member_phone"
          style="margin: 20px 0"
          size="large"
          type="number"
          oninput="if(value>11){value=value.substring(0, 11)}"
          placeholder="请输入手机号"
          :prefix-icon="Iphone"
        />
        <el-input
          v-model="form.password"
          size="large"
          type="password"
          maxlength="16"
          placeholder="请输入密码"
          :prefix-icon="Lock"
        />
        <el-button
          type="primary"
          size="large"
          style="margin-top: 20px; width: 100%; background-color: #ff4f95"
          @click="login"
          >登陆</el-button
        >
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.login-container {
  height: 570px;
  width: 100%;
  background-image: url('@/assets/Imgs/login_bg.png');
  display: flex;
  align-items: center;
  justify-content: center;
  img {
    height: 400px;
    width: 600px;
  }
  .login_right {
    width: 330px;
    margin-left: 60px;
    .title {
      text-align: left;
      font-size: 32px;
      color: #2a359c;
      line-height: 50px;
    }
  }
}
</style>
